<template>
  <div id="systemBtn">
    <div class="btn-l">
      <p @click="autoChange">{{btnText.auto}}</p>
      <p @click="handChange">{{btnText.person}}</p>
      <h5 v-show="isBtn">{{btnText.auto}}</h5>
      <h6 v-show="!isBtn">{{btnText.person}}</h6>
    </div>
    <div class="btn-r" v-if="isParam" @click="paramsBtn">
      参数设定
    </div>
  </div>
</template>

<script>
  export default {
    name: 'systemBtn',
    props: {
      // 控制定位背景样式 是否显示
      isBtn: {
        type: Boolean,
        default: true
      },
      // 文本
      btnText: {
        type: Object,
        default: () => {
          return {
            auto: '自 动',
            person: '人 工'
          }
        }
      },
      // 控制参数设定是否显示
      isParam: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {}
    },

    created () {

    },
    mounted () {

    },
    computed: {},
    methods: {
      // 现场自动
      autoChange () {
        this.$emit('autoChange')
      },
      // 远程人工
      handChange () {
        this.$emit('handChange')
      },
      // 参数设定
      paramsBtn () {
        // if (this.isBtn) {
        this.$emit('paramsBtn')
        // }
      }
    },
    destroyed () {

    },
    components: {}
  }
</script>

<style lang='scss' scoped>
  #systemBtn {
    display: flex;
    .btn-l {
      border: 1px solid rgba(76, 144, 253, 1);
      height: 40px;
      line-height: 40px;
      width: 180px;
      border-radius: 20px;
      color: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: relative;
      p {
        display: inline-block;
        font-size: 14px;
        &:hover {
          cursor: pointer;
        }
      }
      h5 {
        position: absolute;
        top: 0;
        left: 0;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        width: 90px;
        height: 38px;
        background-color: #4C90FD;
        font-size: 14px;
        text-align: center;
      }
      h6 {
        position: absolute;
        top: 0;
        right: 0;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        width: 90px;
        height: 38px;
        background-color: #4C90FD;
        font-size: 14px;
        text-align: center;
      }
    }
    .btn-r {
      width: 140px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 20px;
      margin-left: 10px;
      font-size: 14px;
      color: $font-f;
      border: 1px solid rgba(76, 144, 253, 1);
      &:hover {
        cursor: pointer;
      }
    }
  }
</style>
